<style scoped lang="less">
.comehere{
    position: relative;
    z-index: 2;
}
</style>
<style lang="less">
#dialogbox{
    position: absolute;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
    border-radius: 0.1rem;
    height: 2.03rem;
    width:8.0rem;
    margin-left: -4rem;
    margin-top: -2.8rem;
    .dhleft{
        float: left;
        width:5.65rem;
        padding-left:0.32rem;
        .title{
            color: #333333;
            font-size:0.4rem;
            margin-top:0.29rem;
        }
        .content{
            font-size:0.32rem;
            color: #9E9E9D;
        }
    }
    .dhright{
        float:right;
        background:url("../../images/dhbtnicon.png") no-repeat;
        height: 2.03rem;
        width:2.35rem;
        background-size:100% 100%;
        border-radius: 0 0.1rem 0.1rem 0;
    }
    span{
        display:block;
        background:url("../../images/dhsjicon.png") no-repeat;
        background-size:100% 100%;
        width:0.4rem;
        height:0.4rem;
        position: absolute;
        left:50%;
        bottom:-0.4rem;
        margin-left:-0.2rem;
    }
}
</style>
<template>
<div>
    <div id="allmap"></div>
</div>

</template>
<script>
    import { mapState } from 'vuex'
    import global from '../../config/global'
    import '../../js/flexible.debug.js'
    export default {
		data() {
			return {
                cemeteryName:"",//陵园名称
                detailAddress:"",//陵园详细地址
                latitude:"",//纬度
                longitude:"",//经度
                getlongitude:"",//获取纬度
                getlatitude:"",//获取经度
			}
		},
		mounted(){
            var this_=this;
            var imgurl=require("../../images/dwicon.png");
            function getLocation(){
               var options={
                   enableHighAccuracy:true, 
                   maximumAge:1000
               }
               if(navigator.geolocation){
                   //浏览器支持geolocation
                   navigator.geolocation.getCurrentPosition(onSuccess);
                   
               }else{
                   //浏览器不支持geolocation
               }
           }
           //成功时
           function onSuccess(position){
               //返回用户位置
               //经度
               this_.getlongitude =position.coords.longitude;
               //纬度
               this_.getlatitude = position.coords.latitude;
           };
           //getLocation()
            this.$http.get(global.host+'/common/getCemeteryInfo?cemeteryId='+this.$route.query.cemeteryId)
				.then((response) => {
					this.cemeteryName=response.data.cemeteryName
					this.detailAddress=response.data.detailAddress;
					this.latitude=response.data.latitude;
                    this.longitude=response.data.longitude;
                    $("#allmap").height($(window).height());
                    var map = new BMap.Map("allmap");
                    var pt = new BMap.Point(this_.longitude,this_.latitude);
                    map.centerAndZoom(pt, 13);  
                    map.enableScrollWheelZoom();
                    // 复杂的自定义覆盖物
                    function ComplexCustomOverlay(point, text, mouseoverText){
                        this._point = point;
                        this._text = text;
                        this._overText = mouseoverText;
                    }
                    ComplexCustomOverlay.prototype = new BMap.Overlay();
                    ComplexCustomOverlay.prototype.initialize = function(map){
                        this._map = map;
                        var div= "<div id='dialogbox'>\
                                <div class='dhleft'>\
                                    <p class='title'>"+this_.cemeteryName+"</p>\
                                    <p class='content'>"+this_.detailAddress+"</p>\
                                </div>\
                                <div class='dhright'></div>\
                                <span></span>\
                            </div>"
                        this._div=$(div)[0];
                        map.getPanes().labelPane.appendChild(this._div);
                        $("#dialogbox").find(".dhright").click(function(){
                            window.location.href="http://api.map.baidu.com/direction?destination="+this_.detailAddress+"&mode=transit&region=上海&output=html";
                        })
                        $("#dialogbox").find(".dhright")[0].ontouchstart=function(){
                            window.location.href="http://api.map.baidu.com/direction?destination="+this_.detailAddress+"&mode=transit&region=上海&output=html";
                        }
                        return this._div;
                    }
                    ComplexCustomOverlay.prototype.draw = function(){
                        var map = this._map;
                        var pixel = map.pointToOverlayPixel(this._point);
                        this._div.style.left = pixel.x + "px";
                        this._div.style.top  = pixel.y + "px";
                    }
                    var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套" ;
                    var myCompOverlay = new ComplexCustomOverlay(pt, "银湖海岸城",mouseoverTxt);
                    map.addOverlay(myCompOverlay);
                    //创建自定义ICON
                    
                    var myIcon = new BMap.Icon(imgurl, new BMap.Size(39,39));
                    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
                    map.addOverlay(marker2);              // 将标注添加到地图中
				})
				.catch(function (response) {
					
				})
                
        
            
            
            
		},
		components: {
			
		},
		computed: {
			
		},
		created() {
            this.init()
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			//'$route':""
		},
        computed: mapState({ user: state => state.user }),
		methods:{
            init(){
                
            }
		},
		
		
    }
</script>